<template>
	<view>
		<u-navbar title="我的订单" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<u-tabs :list="tabList" lineColor="#E6A5B4" :scrollable="false" :activeStyle="activeStyle"
			:inactiveStyle="inactiveStyle" @click="onSelectClick" />
		<view class="listV">
			<scroll-view v-if="orderList.length>0" style="height: 80vh;" :scroll-y="true" @scroll="onScroll"
				:scroll-with-animation="true" :refresher-enabled="true" :refresher-triggered="triggered"
				@refresherrefresh="onDataList" refresher-default-style="white" @scrolltolower="scrolltolower">

				<view @click="onItemClick(item)" class="itemV" v-for="(item,index) in orderList" :key="index">
					<view class="view1">
						<view class="itemTv1">{{item.createtime}}</view>
						<view class="itemTv2">{{getOrderName(item)}}</view>
					</view>

					<view class="view2" v-for="(shopData,shopIndex) in item.products" :key="shopIndex">
						<image class="itemIv" :src="shopData.image"></image>
						<view class="view3">
							<view class="view4">
								<view class="itemTv3">{{shopData.title}}</view>
								<view class="itemTv4">x{{shopData.number}}</view>
							</view>
							<view class="itemTv5">¥{{shopData.price}}</view>
							
							<view v-if="item.state==4" class="itemBt3" @click.stop="onOrderEvaluateClick(shopData,item.order_id)">立即评价</view>
						</view>
					</view>

					<view class="view5">
						<view class="itemTv6">实付款：</view>
						<view class="itemTv7">¥{{item.total_price}}</view>
					</view>
					<view class="lineV"></view>
					
					<!-- state 0=全部,1=待付款,2=待发货,3=待收货,4=待评价,5=售后 -->
					<view class="view6" v-if="item.state==1||item.state==3">
						<view v-if="item.state==1" class="itemBt1" @click.stop="onOrderCancelClick(item)">取消订单</view>
						<view v-if="item.state==3" class="itemBt1" @click.stop="onOrderConfirmClick(item)">确认收货</view>
						<view v-if="item.state==1" class="itemBt2" @click.stop="onOrderPayClick(item)">立即支付</view>
					</view>
				</view>

			</scroll-view>
			<view v-if="orderList.length==0"
				style="justify-content: center; align-items: center; display: flex; height: 50vh; color: #8D8D8D;">
				暂无订单
			</view>
		</view>

		<u-modal @confirm="onCancel()" @cancel="showCancel=false" :show="showCancel" :showCancelButton="true"
			content="确定要取消订单吗？"></u-modal>

		<u-modal @confirm="onPay()" @cancel="showPay=false" :show="showPay" :showCancelButton="true"
			content="确定要删除订单吗？"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				activeStyle: {
					"color": "#E6A5B4D",
					"font-size": "34rpx"
				},
				inactiveStyle: {
					"color": "#8D8D8D",
					"font-size": "32rpx"
				},
				orderList: [],
				tabList: [{
					name: '全部', //0
					id: 0
				}, {
					name: '待付款', //1
					id: 1
				}, {
					name: '待发货', //2
					id: 2
				}, {
					name: '待收货', //3
					id: 3
				}, {
					name: '待评价', //4
					id: 4
				}],
				mPage: 1,
				scrollTop: 0,
				triggered: false,
				mStatus: 0, //0=全部,1=待付款,2=待发货,3=待收货,4=待评价,5=售后
				showCancel: false,
				showPay: false,
			}
		},
		onLoad() {
			this.mPage = 1;
			this.getOrderList();
		},
		methods: {
			//<!-- state 0=全部,1=待付款,2=待发货,3=待收货,4=待评价,5=售后 -->
			getOrderName(item){
				if(item.state == 1){
					return "待付款"
				}else if(item.state == 2){
					return "待发货"
				}else if(item.state == 3){
					return "待收货"
				}else if(item.state == 4){
					return "待评价"
				} 
			},
			onItemClick(item){
				this.$u.route({
					url: "/shop/order/orderDetail",
					params: {
						id: item.order_id
					}
				})
			},
			onSelectClick(e) {
				let id = e.id;
				this.mStatus = id;
				this.mPage = 1;
				this.getOrderList();
			},
			onDataList() {
				if (this.scrollTop == 0) {
					this.triggered = true;
					this.mPage = 1
					this.getOrderList()
				}
			},
			scrolltolower() { //上拉加载
				this.mPage++
				this.getOrderList()
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			getOrderList() {
				this.$api.getShoOrderList({
					type: this.mStatus, //0=全部,1=待付款,2=待发货,3=待收货,4=待评价,5=售后
					page: this.mPage,
					pagesize: 10
				}).then((res) => {
					if (this.mPage == 1) {
						this.orderList = res;
					} else {
						this.orderList.push(...res)
					}
					this.triggered = false;
				}).catch((e) => {
					this.triggered = false;
				})
			},
			onOrderEvaluateClick(item,ordId) {
				this.$u.route({
					url: "/shop/order/orderEvaluate",
					params: {
						item: JSON.stringify(item),
						orderId:ordId
					}
				})
			},
			onOrderCancelClick(item) { //取消
				this.$api.getShoOrderCancel("", {
						params: {
							order_id: item.order_id,
						}
					}).then((res) => {
					this.mPage = 1
					this.getOrderList();
					uni.$u.toast("取消成功");
				}).catch((e) => {
					uni.$u.toast("取消失败");
				})
			},
			onOrderConfirmClick(item) { //确认
				this.$api.getShoOrderReceived("", {
						params: {
							order_id: item.order_id,
						}
					}).then((res) => {
					this.mPage = 1
					this.getOrderList();
					uni.$u.toast("确认成功");
				}).catch((e) => {
					uni.$u.toast("确认失败");
				})
			},
			onOrderPayClick(item) { //支付
				this.$api.getShoPay(
					"", {
						params: {
							order_id: item.order_id,
						}
					}).then((res) => {
					this.payOrder(res, item.order_id);
				}).catch((e) => {
					uni.$u.toast("支付失败");
				})
			},
			payOrder(payData, orderid) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonce_str,
					package: "prepay_id="+payData.prepay_id,
					signType: "MD5",
					paySign: payData.paySign,
					success: function(res) {
						uni.$u.toast("支付成功");
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					},
					fail: function(err) {
						uni.$u.toast("支付失败");
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.listV {
		background-color: #FFFFFF;
		height: 83vh;
	}

	.itemV {
		margin-top: 30rpx;
		background: #1F1F1F;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.view1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.itemTv1 {
		font-size: 28rpx;
		color: #939393;
	}

	.itemTv2 {
		font-size: 32rpx;
		color: #F9F9F9;
	}

	.view2 {
		display: flex;
		margin-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.itemIv {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.view3 {
		flex: 1;
		margin-left: 20rpx;
	}

	.view4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.itemTv3 {
		font-size: 28rpx;
		color: #F9F9F9;
	}

	.itemTv4 {
		font-size: 25rpx;
		color: #9b9b9b;
	}

	.itemTv5 {
		font-size: 28rpx;
		color: #F9F9F9;
		margin-top: 20rpx;
	}

	.view5 {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.itemTv6 {
		font-size: 28rpx;
		color: #9B9B9B;
	}

	.itemTv7 {
		font-size: 32rpx;
		color: #CEF743;
	}

	.lineV {
		width: 100%;
		height: 1rpx;
		background: #515151;
		margin-top: 20rpx;
	}

	.view6 {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 28rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.itemBt1 {
		border-radius: 30rpx;
		border: 2rpx solid #515151;
		font-size: 32rpx;
		color: #9B9B9B;
		padding-top: 4rpx;
		padding-bottom: 4rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		margin-left: 30rpx;
	}

	.itemBt2 {
		padding-top: 4rpx;
		padding-bottom: 4rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		border-radius: 30rpx;
		border: 2rpx solid #CEF743;
		font-size: 32rpx;
		color: #CEF743;
		margin-left: 30rpx;
	}
	
	.itemBt3 {
		border-radius: 30rpx;
		border: 2rpx solid #515151;
		font-size: 28rpx;
		color: #9B9B9B;
		padding-top: 2rpx;
		padding-bottom: 2rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: fit-content;
		margin-top: 20rpx;
	}
</style>
